<template>
  <div class="editing-status">
    <Input-number ref="input" :min="min" :max="max" :step="step" v-model="val" @on-blur="doSave" @on-enter="doSave"
                  @on-change="doSave" style="width: 100%"/>
  </div>
</template>

<script>
  export default {
    name: "number-editor",
    props: {
      row: Object,
      column: Object,
      index: Number
    },
    data() {
      return {
        val: this.row[this.column.key],
        min: -Infinity,//最小值
        max: Infinity,//最大值
        step: 1,//步幅
      }
    },
    watch: {
      'column.editor.min': {
        handler(newVal) {
          this.min = newVal
        },
        immediate: true,
        deep: true // 表示开启深度监听
      },
      'column.editor.max': {
        handler(newVal) {
          this.max = newVal
        },
        immediate: true,
        deep: true // 表示开启深度监听
      },
      'column.editor.step': {
        handler(newVal) {
          this.step = newVal
        },
        immediate: true,
        deep: true // 表示开启深度监听
      }
    },
    methods: {
      doSave: function () {
        let newVal = this.val;
        let oldVal = this.row[this.column.key];
        let validate = this.column.editor.validate;
        if (validate) {
          let result = validate(newVal, oldVal, this.row, this.index);
          if (!result.valid) {
            this.$Message.error(result.msg);
            // this.$refs.input.focus();
            //return ;
          }
        }
        //下面这段代码会导致更新表格数据后，依旧会将表格中的input值改回newVal的bug。
        let param = {
          rowIndex: this.index,
          columnKey: this.column.key,
          value: newVal,
          callbackEvent: this.column.editor.callbackEvent
        }
        this.$emit("cell-on-change", param);
      }
    }
  }
</script>

<style lang="less" scoped>
  .editing-status {
    height: 35px;
    line-height: 35px;
    position: relative;
  }
</style>

